<template>
  <div :class="{ 'login-form': true }">
    <h1 class="title">{{ sysTitle }}</h1>
    <div class="form">
      <div class="form-container-bg">
        <div class="form-container">
          <div class="form-title">登录</div>
          <div class="form-logo">
            <img src="/resource/img/logo.svg" />
          </div>
          <div class="form-sys-title">fixed assets management system</div>

          <n-form
            class="form-box"
            ref="formRef"
            size="large"
            :label-width="80"
            label-placement="left"
            :model="formData"
            :rules="rules"
          >
            <n-form-item path="userName">
              <n-input
                class="test"
                v-model:value="formData.userName"
                placeholder="请输入账号"
                :style="inputStyle"
              >
                <template #prefix>
                  <i-people
                    theme="outline"
                    size="16"
                    class="icon"
                    fill="#333"
                  />
                </template>
              </n-input>
            </n-form-item>
            <n-form-item path="password">
              <n-input
                type="password"
                show-password-on="click"
                v-model:value="formData.password"
                placeholder="请输入密码"
                :style="inputStyle"
              >
                <template #prefix>
                  <i-lock theme="outline" size="16" class="icon" fill="#333" />
                </template>
              </n-input>
            </n-form-item>
            <n-form-item>
              <n-button
                class="login-btn"
                type="info"
                @click="loginHandle"
                :style="buttonStyle"
              >
                登录
              </n-button>
            </n-form-item>
          </n-form>
        </div>
      </div>

      <!-- form背景样式 -->
      <div class="screen__background">
        <span
          class="screen__background__shape screen__background__shape4"
        ></span>
        <span
          class="screen__background__shape screen__background__shape3"
        ></span>
        <span
          class="screen__background__shape screen__background__shape2"
        ></span>
        <span
          class="screen__background__shape screen__background__shape1"
        ></span>
      </div>
    </div>
  </div>
  <!-- 验证码 -->
  <!-- <slider-code
    v-model="sliderDialog"
    :change-code="changeCode"
    :data="captcha"
    :valid="validHandle"
  /> -->
</template>

<script setup lang="ts">
  import { FormRules, FormInst } from 'naive-ui'
  import { router } from '@/router'
  // import sliderCode from './login-slider-code.vue'
  import { useTheme } from '@/store/modules/theme'
  import { useUser } from '@/store/modules/user'
  import { getIconColor } from '@/hooks'
  // import { useHttp } from '@/store/modules/http'
  import { passwordValidator } from '@/utils/validator'
  // import sliderBg from '@/assets/images/login/slider-bg.jpg'

  //主题
  const theme = useTheme()
  const { primary } = storeToRefs(theme)
  const iconColor = getIconColor()
  const sysTitle = VITE_APP_TITLE

  //表单
  const formData = reactive({
    userName: '',
    password: ''
  })
  const formRef = ref<FormInst | null>(null)
  const user = useUser()

  // input输入框白天和夜晚模式统一
  const inputStyle = {
    '--n-border': '1px solid rgb(224, 224, 230)',
    '--n-color': '#fff',
    '--n-color-focus': '#fff',
    '--n-color-focus-warning': 'rgba(255, 255, 255, 1)',
    '--n-color-focus-error': 'rgba(255, 255, 255, 1)',
    '--n-text-color': 'rgb(51, 54, 57)',
    '--n-placeholder-color': 'rgba(194, 194, 194, 1)',
    '--n-placeholder-color-disabled': 'rgba(209, 209, 209, 1)',
    '--n-icon-color': '#333'
  }
  // 按钮文字白天和夜晚模式统一
  const buttonStyle = {
    '--n-text-color': '#fff',
    '--n-text-color-hover': '#fff',
    '--n-text-color-pressed': '#fff',
    '--n-text-color-focus': '#fff',
    '--n-text-color-disabled': '#fff'
  }

  //验证码
  const sliderDialog = ref(false)

  const rules: FormRules = {
    userName: [
      {
        required: true,
        trigger: ['input', 'blur'],
        message: '请输入账号'
      }
    ],
    password: [
      {
        trigger: ['input', 'blur'],
        validator: passwordValidator
      }
    ]
  }

  // const changeCode = async () => {
  //   try {
  //     // const res = await getCode()
  //     // if (res?.code === '0000') {
  //     //   captcha.backgroundImage = res.data.captcha.backgroundImage
  //     //   captcha.sliderImage = res.data.captcha.sliderImage
  //     //   captcha.id = res.data.id
  //     // }
  //   } catch (e) {
  //     console.log(e)
  //   }
  // }
  // const captcha = reactive({
  //   backgroundImage: sliderBg,
  //   sliderImage: sliderBg,
  //   id: ''
  // })
  function loginHandle(e) {
    e.preventDefault()
    formRef.value?.validate((errors) => {
      if (!errors) {
        validHandle()
      } else {
        console.log(errors)
      }
    })
  }
  const validHandle = async () => {
    try {
      const _data = {
        ...formData
      }
      const code = await user.login(_data)
      switch (code) {
        case '0000':
          window['$message'].success('登录成功')
          sliderDialog.value = false
          await router.push('/home')
          break
        // case '4004':
        //   await changeCode()
        //   break
        // case '4001':
        // default:
        //   sliderDialog.value = false
        // break
      }
    } catch (e) {
      console.log(e)
    }
  }

  // 添加enter键按下监听
  const handlePressEnter = (e) => {
    if (e.key === 'Enter') loginHandle(e)
  }
  onMounted(() => {
    nextTick(() => {
      const body = document.body
      body && body.addEventListener('keydown', handlePressEnter)
    })
  })
  onUnmounted(() => {
    const body = document.body
    body && body.removeEventListener('keydown', handlePressEnter)
  })
</script>

<style lang="less" scoped>
  .login-form {
    z-index: 2;
    position: relative;
    margin: 0 100px 0 50px;
  }
  // 低版本下样式修改
  .login-from-low {
    .title {
      color: #fff;
    }
  }
  .title {
    color: #034db5;
    font-size: 26px;
    text-align: center;
  }
  .form {
    &:hover {
      transform: translate(0, -1px);
      transition: all 0.1 ease;
    }
    position: relative;
    &-title {
      color: #034db5;
      width: 100%;
      font-weight: 600;
      font-size: 24px;
    }
    &-sys-title {
      color: #0440a6;
      font-size: 14px;
      text-align: center;
      font-weight: 600;
      margin: 20px 0 30px 0;
    }
    &-container {
      // .blur-bg();
      position: relative;
      // background-color: rgba(240, 240, 240, 0.1);
      z-index: 3;
      box-shadow: 0 0 20px 5px rgb(40 40 40 / 30%);
      // box-shadow: 0px 0px 24px #3476cc;
      // backdrop-filter: blur(5px);
      width: 450px;
      display: flex;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;
      padding: 16px;
      margin: 0 auto;
      // border: 1px solid @border-color-grey;
      border-radius: 4px;
      &-bg {
        position: relative;
        z-index: 3;
      }
    }
    &-container:hover {
      box-shadow: 0 0 20px 5px rgb(5 114 226 / 30%);
    }
    &-logo {
      width: 150px;
      height: 150px;
      margin-top: 60px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .form-box {
      width: 100%;
      .login-btn {
        width: 100%;
      }
    }
    .login-btn {
      margin-bottom: 30px;
    }
  }

  // 背景样式
  .screen__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    z-index: 2;
    background: #0440a6;
    border-radius: 4px;
    overflow: hidden;
  }
  .screen__background__shape {
    transform: rotate(45deg);
    position: absolute;
  }
  .screen__background__shape1 {
    height: 657px;
    width: 675px;
    background: #fff;
    top: -150px;
    right: 200px;
    border-radius: 0 72px 0 0;
  }
  .screen__background__shape2 {
    height: 220px;
    width: 220px;
    background: #045cc7;
    top: -172px;
    right: 0;
    border-radius: 32px;
  }
  .screen__background__shape3 {
    height: 540px;
    width: 190px;
    background: linear-gradient(270deg, #045ac5, #4884d1);
    top: -24px;
    right: 0;
    border-radius: 32px;
  }
  .screen__background__shape4 {
    height: 400px;
    width: 200px;
    background: #3f7dcd;
    top: 420px;
    right: 50px;
    border-radius: 60px;
  }
  @media only screen and (max-width: 767px) {
    .login-form {
      margin: 0 auto;
    }
    .title {
      color: #fff;
    }
  }
  @media only screen and (max-width: 992px) {
    .title {
      color: #fff;
    }
  }
  [data-theme='dark'] {
    .screen__background {
      background: linear-gradient(to left, #2c5364, #203a43, #0f2027);
      &__shape2 {
        background: #22a0cc;
      }
      &__shape3 {
        background: linear-gradient(to bottom, #00a5ec, #2a444d);
      }
      &__shape4 {
        background: #105f7b;
      }
    }
    .title {
      color: #fff;
    }
    .form-container:hover {
      box-shadow: 0 0 20px 5px rgb(255 255 255 / 30%);
    }
  }
  :deep(.n-input__eye) {
    // color: ;
  }
</style>
